<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<h1>关键字查询</h1>
<input type="text" id="keyword" name="keyword"><br>
<input type="radio" name="way" value="byName" checked="checked" onclick="change(this.value)">按照名字查询<br>
<input type="radio" name="way" value="byAuthor" onclick="change(this.value)">按照作者查询<br>
<input type="radio" name="way" value="byPublisher" onclick="change(this.value)">按照出版社查询<br>
<table style="width: 300px; text-align: center; background-color: beige" cellspacing="0" cellpadding="0">
    <thead style="background-color: lightblue">
        <td>书号</td>
        <td>书名</td>
        <td>作者</td>
        <td>出版社</td>
    </thead>
    <tbody id="tb">

    </tbody>
</table>
</body>
<script>
    var url="byName";

    function change(obj){
        url=obj;
    }

    $(function () {
        search();

        $("#keyword").keyup(function () {
            search();
        });
    });

    function search() {
        $.ajax({
            url:url,
            type:"POST",
            data:{keyword:$("#keyword").val()},
            dataType:"json",
            success:function (data) {
                var str="";
                $("#tb").html("");
                $(data).each(function (i,n) {
                    str+="<tr>" +
                        "<td>"+n.sid+"</td>" +
                        "<td>"+n.sname+"</td>" +
                        "<td>"+n.author+"</td>" +
                        "<td>"+n.publisher+"</td>" +
                        "</tr>"
                });
                $("#tb").html(str);
            }
        });
    }
</script>
</html>